import React, { Component } from 'react'
import { Layout, Menu } from "antd"
import {withRouter} from "react-router-dom"
import {observer} from "mobx-react"
import "./index.scss"
import {

    UserOutlined,

} from '@ant-design/icons';
import { routerList } from '../../utils/routerList';
import mobxdata from "../../mobx/data"
import {connect} from "react-redux"
const { Header, Sider, Content } = Layout
const {SubMenu} =  Menu

@connect(
    state=>{
        return {
      
            collapsed:state.getIn(['data','collapsed']),
        }
    }
)
@withRouter
@observer
class MyMenu extends Component {
   
    itemmenuClick=({item,key})=>{
        console.log(key);
         this.props.history.push(key)
    }
    renderItemmenu=(routerList)=>{
        const {userinfo} = mobxdata  // 用户信息 里面的 权限数据 role
        
        return routerList.map((item,i)=>{
            if(item.children){
                if(userinfo.role  < item.premisssion ){
                    return null
                }else{
                    return (
                        <SubMenu key={item.path} icon={item.icon}  title={item.title} >
                            {this.renderItemmenu(item.children) }
                        </SubMenu>     
                    )
                }
            }else{
                if(userinfo.role  < item.premisssion ){
                    return null 
                }else{
                    return (
                        <Menu.Item key={item.path} icon={item.icon}>
                            {item.title}
                        </Menu.Item>
                    )
                }
            }
        })
    }
    render() {
          // console.log(this.props)
          const {location} = this.props;
        //   console.log(location)
          const pathname = location.pathname
          const selectedKeys = [pathname]
          const names = pathname.split("/")
          // console.log(names)
          const defaultOpenKeys = ['/'+names[1]+'/'+names[2] ]
        return (
            <div>
   
                    <Sider trigger={null} collapsible collapsed={this.props.collapsed}
                        style={{
                            width:200,
                            height:"100vh",
                            background:"#123456"
                        }}

                    >
                        <div className="logo" style={{width:'100%', textAlign:"center", color:"#fff",fontSize:"20px", padding:10,marginTop:10,boxSizing:"border-box"}}>
                        {/* <img style={{height:40,width:'100%',display:this.props.collapsed?'none':'block'}} src='http://img01.yun300.cn/repository/image/MVxn63bLTeClPOQLpF45UA.png?k=1560392951000&tenantId=74111&viewType=1&k=1606877716000
                        ' alt=""/> */}
                        <img src={require("../../assets/images/logo.png").default} alt="" style={{width:"100%",height:"100px"}} />
                        </div>
                        <Menu theme="dark" mode="inline"  defaultOpenKeys={defaultOpenKeys}  selectedKeys={selectedKeys} inlineCollapsed={this.props.collapsed} onClick={this.itemmenuClick}>
                            {
                                this.renderItemmenu(routerList)
                            }
                        </Menu>
                    </Sider>
       
            </div>
        )
    }
}

export default MyMenu